<template>
    <div class="app-container">
      <h4>进度</h4>
      <el-steps :active="hitchInfo.status+1" align-center>
        <el-step title="登记"></el-step>
        <el-step title="已派单"></el-step>
        <el-step title="未处理"></el-step>
        <el-step title="处理中"></el-step>
        <el-step title="已处理"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <h4>故障信息</h4>
      <table
        class="table table-striped table-condenseda table-bordered"
        width="100%"
      >
        <tbody>
          <tr>
            <th width="15%">故障类型</th>
            <td width="35%">
              <b v-if="hitchInfo.hitchType == 0">通讯故障</b>
              <b v-if="hitchInfo.hitchType == 1">网关故障</b>
              <b v-if="hitchInfo.hitchType == 2">配件故障</b>
              <b v-if="hitchInfo.hitchType == 3">主板故障</b>
              <b v-if="hitchInfo.hitchType == 4">过流</b>
              <b v-if="hitchInfo.hitchType == 5">过压</b>
              <b v-if="hitchInfo.hitchType == 6">电器短路</b>
              <b v-if="hitchInfo.hitchType == 7">线路老化</b>
            </td>
            <th width="15%">充电站点</th>
            <td width="35%">{{ hitchInfo.addressSite }}</td>
          </tr>
          <tr>
            <th>充电桩型号</th>
            <td>{{ hitchInfo.chargingpileType }}</td>
            <th>充电枪编号</th>
            <td>
              {{ hitchInfo.number }}
            </td>
          </tr>
          <tr>
            <th>发生时间</th>
            <td>{{ hitchInfo.regTime }}</td>
            <th>详细地点</th>
            <td>
              <b>{{ hitchInfo.address }}</b>
            </td>
          </tr>
          <tr>
            <th>紧急程度</th>
            <td>
              <b v-if="hitchInfo.rank == 0">一般</b>
              <b v-if="hitchInfo.rank == 1">紧急</b>
              <b v-if="hitchInfo.rank == 2">加急</b>
              <b v-if="hitchInfo.rank == 3">超加急</b>
            </td>
            <th>状态</th>
            <td>
              <b v-if="hitchInfo.status == 0">登记</b>
              <b v-if="hitchInfo.status == 1">已派单</b>
              <b v-if="hitchInfo.status == 2">未处理</b>
              <b v-if="hitchInfo.status == 3">处理中</b>
              <b v-if="hitchInfo.status == 4">已处理</b>
              <b v-if="hitchInfo.status == 5">已完成</b>
            </td>
          </tr>
          <tr>
            <th>故障内容</th>
            <td colspan="3">{{ hitchInfo.content }}</td>
          </tr>
          <tr>
            <th>资料附件</th>
            <td colspan="3">
              <b>
                <el-image
                    style="width: 150px;"
                    :src="hitchInfo.hiddenImg"
                    :preview-src-list="[hitchInfo.hiddenImg]"
                  />
              </b>
            </td>
          </tr>
          <tr>
            <th>处理人</th>
            <td>
              <b>{{ hitchInfo.person }}</b>
            </td>
            <th>预计完成时间</th>
            <td>
              <b>{{ hitchInfo.estimate }}</b>
            </td>
          </tr>
          <tr>
            <th>任务内容</th>
            <td colspan="3">
              <b>{{ hitchInfo.assContent }}</b>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="dealRank > 3">
        <h4>办理信息</h4>
      <table
        class="table table-striped table-condenseda table-bordered"
        width="100%"
      >
        <tbody>
          <tr>
            <th width="15%">办理说明</th>
            <td colspan="3">
              <b>{{ dealInfo.explain }}</b>
            </td>
          </tr>
          <tr>
            <th>现场图片</th>
            <td>
              <el-image
                    style="width: 150px;"
                    :src="dealInfo.sceneImg"
                    :preview-src-list="[dealInfo.sceneImg]"
                  />
            </td>
            <th>资料附件</th>
            <td>
              <el-image
                    style="width: 150px;"
                    :src="dealInfo.otherImg"
                    :preview-src-list="[dealInfo.otherImg]"
                  />
            </td>
          </tr>
        </tbody>
      </table>
      </div>
  
      <el-row style="text-align:center;margin-top: 40px;">
        <el-button @click="back">
          返回
        </el-button>
      </el-row>
    </div>
  </template>
  <script>
  import '@/styles/show.css'
  import hitchDeal from "@/api/charging-pile/list"
  
  export default {
    data() {
      return {
        hitchInfo:{},
        dealInfo:{},
        // lendItemList: [], //投资列表
        // lendReturnList: [], //还款计划列表
        dealRank:0,
      }
    },
  
    mounted() {
      // console.log(this.$route.params.id);
      // console.log(this.$route.params.rank);
      if (this.$route.params.id) {
        this.fetchDataById()
      }
      if (this.$route.params.status > 3) {
        this.dealRank = 4;
        this.fetchDataDealById()
      }
    },
  
    methods: {
      fetchDataById() {
        hitchDeal.fetchDataById(this.$route.params.id).then(res => {
          console.log(res);
          this.hitchInfo = res.data.hitchInfo
        })
      },
      fetchDataDealById(){
        hitchDeal.fetchDataDealById(this.$route.params.id).then(res => {
          console.log(res);
          this.dealInfo = res.data.dealInfo
        })
      },
  
      back() {
        this.$router.push({ path: '/charging-pile/hitch_solve' })
      }
    }
  }
  </script>
  <style>
    body {
    background: url(/static/img/川崎h2.1d055f7a.jpg);
    background-size: 100%;
}
</style>